<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-12 16:47:01
 * @LastEditTime: 2019-10-30 17:43:48
 * @LastEditors: Please set LastEditors
 -->
<template>
<div class="notfound" ref="notfound">
    <div class="header_top">
      <van-nav-bar title="找不到页面了" left-arrow
      @click-left='$router.push("/")'/>
    </div>
    <div class="img_box">
       <!--  <progressive-img 
        src="https://cdn.dribbble.com/assets/art-banners/doggo_3d-8ef690713fd161f486c543a50f8badd5c86840005737a15018463397cf347b55.gif"
        @onLoad="onLoad"
        @onLoadPlaceholder="onLoadPlaceholder"
        @onError="onError($event)"
        @onErrorPlaceholder="onErrorPlaceholder"
        /> -->
        <img v-nopic src="https://cdn.dribbble.com/assets/art-banners/doggo_3d-8ef690713fd161f486c543a50f8badd5c86840005737a15018463397cf347b55.gif" alt="">
    </div>
</div>
</template>
<script>
export default {
    methods:{
        onLoad(e){
            console.log('e',e);
        },
        onLoadPlaceholder(e1){
            console.log('e1',e1);
        },
        onError(e){
            console.log('e',e);
            this.$refs.notfound.style.background = '#fff';
            e.target.src = require('@/assets/images/404.gif');
        },
        onErrorPlaceholder(err1){
            console.log('err1',err1);
        }

    }
}
</script>
<style lang="less" scoped>
.notfound{
    height:100vh;
    width:100vw;
    display:flex;
    flex-direction:column;
    background:#EFAE1C;
    .header_top{
        flex-shrink:0;
        margin-bottom:0;
    }
    .img_box{
        flex:1;
        display:flex;
        justify-content:center;
        align-items:center;
        img{
            height:auto;
            width:100%;
        }
    }
}
</style>